<template>
  <view class="feedback-container">
    <u-form :model="feedbackForm" ref="feedbackForm">
      <u-form-item>
        <u-textarea
          v-model="feedbackForm.content"
          placeholder="请输入您的反馈内容..."
          :height="200"
        />
      </u-form-item>
      
      <u-form-item>
        <view class="upload-box">
          <view class="upload-item" v-for="(item, index) in feedbackForm.images" :key="index">
            <image :src="item" mode="aspectFill" class="upload-image" />
            <u-icon
              name="close"
              class="delete-icon"
              @click="removeImage(index)"
            />
          </view>
          
          <view class="upload-btn" @click="chooseImage" v-if="feedbackForm.images.length < 3">
            <u-icon name="plus" size="30" />
            <text class="upload-text">上传图片</text>
          </view>
        </view>
        <view class="upload-tip">支持jpg/png格式，单张不超过2MB（最多3张）</view>
      </u-form-item>

      <view class="submit-btn">
        <u-button type="primary" @click="submitFeedback">提交反馈</u-button>
      </view>
    </u-form>
  </view>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { getToken } from '@/utils/auth'

const feedbackForm = reactive({
  content: '',
  images: []
})

// 选择图片
const chooseImage = () => {
  uni.chooseImage({
    count: 3 - feedbackForm.images.length,
    sizeType: ['compressed'],
    sourceType: ['album', 'camera'],
    success: (res) => {
      res.tempFilePaths.forEach(path => {
        uploadImage(path)
      })
    }
  })
}

// 上传图片
const uploadImage = (filePath) => {
  uni.uploadFile({
    url: import.meta.env.VITE_APP_BASE_API + '/system/user/profile/upload',
    filePath: filePath,
    name: 'file',
    header: {
      Authorization: 'Bearer ' + getToken()
    },
    success: (res) => {
      const response = JSON.parse(res.data)
      if (response.code === 200) {
        feedbackForm.images.push(response.data.url)
        uni.showToast({
          title: '上传成功',
          icon: 'success'
        })
      } else {
        uni.showToast({
          title: '上传失败',
          icon: 'error'
        })
      }
    },
    fail: () => {
      uni.showToast({
        title: '上传失败',
        icon: 'error'
      })
    }
  })
}

// 删除图片
const removeImage = (index) => {
  feedbackForm.images.splice(index, 1)
}

// 提交反馈
const submitFeedback = async () => {
  if (!feedbackForm.content.trim()) {
    uni.showToast({
      title: '请输入反馈内容',
      icon: 'none'
    })
    return
  }
  
  try {
    // 这里需要调用后端API提交反馈
    // const { data } = await submitFeedbackApi({
    //   content: feedbackForm.content,
    //   images: feedbackForm.images
    // })
    
    uni.showToast({
      title: '提交成功',
      icon: 'success'
    })
    feedbackForm.content = ''
    feedbackForm.images = []
  } catch (error) {
    console.error(error)
    uni.showToast({
      title: '提交失败，请稍后重试',
      icon: 'error'
    })
  }
}
</script>

<style lang="scss" scoped>
.feedback-container {
  padding: 30rpx;
}

.upload-box {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
}

.upload-item {
  position: relative;
  width: 200rpx;
  height: 200rpx;
}

.upload-image {
  width: 100%;
  height: 100%;
  border-radius: 8rpx;
}

.delete-icon {
  position: absolute;
  top: -20rpx;
  right: -20rpx;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  padding: 6rpx;
}

.upload-btn {
  width: 200rpx;
  height: 200rpx;
  border: 2rpx dashed #dcdfe6;
  border-radius: 8rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.upload-text {
  font-size: 24rpx;
  color: #909399;
  margin-top: 10rpx;
}

.upload-tip {
  font-size: 24rpx;
  color: #909399;
  margin-top: 10rpx;
}

.submit-btn {
  margin-top: 40rpx;
}
</style> 